Page({

  /**
   * 页面的初始数据
   */
  data: {
    newslist: [], //消息列表
    scrollTop: 0,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  id: 0,
  message: '', //输入框信息
  //监听页面加载
  
  onLoad() {
    console.log('一口袋')
    wx.connectSocket({
      url: 'ws://localhost:3000',
    })
    //连接成功
    wx.onSocketOpen(result => {
      console.log('连接已打开')
      wx.sendSocketMessage({
        data: '你好',
      })
    })
    // 打开
    wx.onSocketMessage(result => {
      var data = JSON.parse(result.data)
      data.id = this.id++
      data.role = 'server' //设置角色
      var list = this.data.newslist
      list.push(data)
      this.setData({
        newslist:list, //新消息追加到消息列表
        message: null //清空发送完成之后的信息
      })
      // 将列表滚到到最底部
      this.rolling_botton()
    })
    // 关闭
    wx.onSocketClose((result) => {
      console.log("已关闭")
    })
  },

  rolling_botton(e) {
    var s = 0
    var list = wx.createSelectorQuery().selectAll('.list')
    list.boundingClientRect(rects => {
      rects.forEach(rect => { 
        this.setData({
          scrollTop: rect.bottom
        })
      })
    }).exec()
  },
  //监听 input 值的改变
  bindChange(e) {
    this.message = e.detail.value
  },
  send() {
    // 判断发送内容是否为空
    if(this.message){
      wx.sendSocketMessage({
        data: this.message,
      })
      // 我自己的信息
      var list = this.data.newslist 
      list.push({
        id:this.id ++ ,
        content:this.message,
        role:"me"
      })
      this.setData({
        list,
      })
      
      //滚动到底部
      this.rolling_botton()
    }else{
      //弹出提示框
      wx.showToast({
        title: '消息不能为空',
        icon:"none",
        duration:2000
      })
    }
  
  },
  // 关闭链接
  onUnload: function () {
    wx.closeSocket()
    console.log('连接已断开')
  },  

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})